<template>
  <div class="userLogin">
    <Header />
    <section>
        <div class="tal">
          <input
            type="text"
            name="userTel"
            v-model="userTel"
            placeholder="请输入手机号"
          />
        </div>
        <div class="pic">
          <input
            type="possword"
            name="userPwd"
            v-model="userPwd"
            placeholder="请输入密码"
          />
        </div>
        <div class="btn" @click="login">
          登录
        </div>
        <div class="quick-nav">
          <span @click="$router.push('/login')">
            <van-icon name="lock" />
            验证码登录
          </span>
          <span>
            <van-icon name="phone" />
            快速注册
          </span>
        </div>
    </section>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/views/login/Header.vue";
export default {
  components: {
    Tabbar,
    Header,
  },
  data() {
    return {
      userTel: "",
      userPwd: "",
      rules: {
        userPwd: {
          rule:/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
          msg:'请输入最少6位,包括至少1个大写字母,小写字母,数字,特殊字符'
        },
        userTel: {
          rule:/^(?:(?:\+|00)86)?1\d{10}$/,
          msg: '请输入正确的手机号,以1开头的11位数字'
        }
      },
    };
  },
  methods: {
    login() {
      if(!this.validate('userTel')) return
      if(!this.validate('userPwd')) return
      
    },
    validate(key) {
      let bool = true
      if(this.rules[key].rule.test(this[key])) {
          Toast.fail(this.rules[key].msg);
          bool = false
      } else {
        Toast.success('登录成功');
        return bool
      }
    }
  }
};
</script>

<style lang="less" scoped>
.userLogin {
     background: #f5f5f5;
}
section {
  height: 550px;
  padding: 20px;
  div {
    margin-top: 20px;
    width: 100%;
    height: 44px;
    border-radius: 3px;
    input {
      border-radius: 0;
      border: none;
      width: 100%;
      height: 100%;
      padding: 0 7.5px;
      outline: 0;
      box-sizing: border-box;
      border: 1px solid #d7d7d7;
      font-size: 14px;
    }
  }
  .quick-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .btn {
    line-height: 44px;
    text-align: center;
    background:#b0352f ;
    color: #fff;
  }
}
</style>